import React, { useState } from 'react'
import style from './Batchdesignimages.module.css'
import Recommendedimages from '../../Batchdesign/Recommendedimages/Recommendedimages'
import Summer from '../../Batchdesign/Summer/Summer'
import { SearchOutlined, } from '@ant-design/icons';
import { Tabs } from 'antd';
import Batchdesignimages1 from '../../../assets/images/Recommendedimages/13.png'
import type { TabsProps } from 'antd';

function Batchdesignimages() {
        
    const [keys, setKeys] = useState('1')
    const onChange = (key: string) => {
        setKeys(key)
        console.log(keys);
    };
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '推荐图片'
        },
        {
            key: '2',
            label: '我的收藏'
        },
        {
            key: '3',
            label: '我的购买'
        },
    ];

 
    return (
        <div className={style.Batchdesignimages}>
            <div className={style.search}>
                <p><b><SearchOutlined /></b><span>搜索图片</span></p>
            </div>
            <div className={style.Recommendedimages}>
                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
                <div>
                    <div>
                        {keys === '1' ? <div className="main">
                            <Recommendedimages />
                            <Summer />
                        </div> : ''}
                    </div>
                    <div>
                        {keys === '2' ? <div className={style.main1}>
                            <div className={style.img}>
                                <img src={Batchdesignimages1} alt="" />
                                <p>暂无内容</p>
                                <h6>点击图片上<img src=''></img>的进行收藏</h6>
                            </div>
                        </div> : ''}
                    </div>
                    <div>
                        {keys === '3' ? <div className="main">
                            <div className={style.img}>
                                <img src={Batchdesignimages1} alt="" />
                                <p>暂无内容</p>
                                <h6>购买后的图片会显示在这里</h6>
                            </div>
                        </div> : ''}
                    </div>
                </div>
            </div>
       
        </div>
    )
}

export default Batchdesignimages
